<template>
  <div>
   <button v-Test="'add'" >添加</button>
   <button v-Test="'editor'">编辑</button>
   <button v-Test="'del'">删除</button>
  </div>
</template>

<script setup lang='ts'>
import type { Directive } from 'vue'
// 定义一个权限数组
const arr=['add','editor','del']
// 如果说只用到mounted和updated这两个钩子函数,则可以使用自定义指令的简写形式,也就是函数模式
const vTest:Directive<HTMLButtonElement,string>=(el,binding)=>{
  // 权限数组里面没有传入过来的值，则禁用按钮，实现简易版按钮鉴权
  if(!arr.includes(binding.value)){
    el.disabled=true
  }
}

</script>

<style lang='scss' scoped></style>

